import React, { PureComponent } from 'react'
import {
  List,
  InputItem,
  Picker,
  ImagePicker,
  Toast
} from 'antd-mobile'
import NavHeader from '../../components/NavHeader'
import './index.less'

// 性别下拉数据
const genderlist = [
  { label: '男', value: '1' },
  { label: '女', value: '0' },
]
export default class ModifyUserInfo extends PureComponent {
  state = {
    // 临时图片地址
    tempSlides: [],
    avatar: "",
    // 性别
    gender: '',
    // 用户名称
    nickname: '',
    // 联系方式
    phone: '',
  }
  timerid=""

  componentDidMount(){
    this.getUserInfo();
  }

  componentWillUnmount(){
    clearTimeout(this.timerid);
  }

  // 发送请求获取用户信息资料
  async getUserInfo() {
    try {
      // 开启loading
      Toast.loading('加载中...', 0, null, false);
      // 发送请求，获取个人资料
      const res = await this.$axios("get", '/user');
      Toast.hide();
      // console.log(res)
      if (res.status === 200) {
        const { avatar, nickname,gender,phone } = res.body;
        this.setState({
          avatar, 
          nickname,
          gender,
          phone
        });
      }
    } catch (error) {
      Toast.hide();
    }
  }

  // 选择头像
  handleAvatarImg = (files, type, index) => {
    // console.log(files, type, index)
    this.setState({
      tempSlides: files
    },()=>{
      this.modify();
    });
  }

  getValue = (name, value) => {
    this.setState({
      [name]: value
    },()=>{
      if(name!=="phone"){
        this.modify();
      }else{
        clearTimeout(this.timerid);
        this.timerid=setTimeout(()=>{
          this.modify();
        },1000);
      }
    });
  }

  modify = async () => {
    const {
      tempSlides,
      phone,
      nickname,
      gender,
    } = this.state
    let avatar = '';

    // 上传房屋图片：
    if (tempSlides.length > 0) {
      // 已经有上传的图片了
      const form = new FormData();
      tempSlides.forEach(item => form.append('file', item.file));

      const res = await this.$axios("post",'/houses/image', form, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });

      // console.log(res)
      avatar = res.body.join('|');
    }

    // 发布房源
    await this.$axios("patch",'/user', {
      phone,
      nickname,
      gender,
      avatar:avatar?avatar:this.state.avatar
    });
  }

  render() {
    const Item = List.Item;
    const {
      nickname,
      tempSlides,
      phone,
      gender,
      avatar,
    } = this.state;

    return (
      <div className="modifyuserinfo">
        <NavHeader>修改个人信息</NavHeader>

        {/* 头像 */}
        <List
          className="avatar"
          renderHeader={() => '头像'}
        >
          <img className="ava" src={this.baseUrl+avatar} alt="头像"/>
          <ImagePicker
            files={tempSlides}
            onChange={this.handleAvatarImg}
            disableDelete
            className="imgpicker"
          />
        </List>
        <List className="list">
          {/* 用户名称 */}
          <InputItem
            value={nickname}
            onChange={val => this.getValue('nickname', val)}
          >用户名称</InputItem>
          <div className="gender">
            <Picker
              data={genderlist}
              value={[gender]}
              cols={1}
              onChange={val => this.getValue('gender', val[0])}
            >
              <Item arrow="horizontal">
                性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别
              </Item>
            </Picker>
          </div>
          <InputItem
            value={phone}
            onChange={val => this.getValue('phone', val)}
          >
            联系方式
          </InputItem>
        </List>
      </div>
    )
  }
}
